<script lang="ts" setup>
import { Card, Button, UploadDragger, message } from 'ant-design-vue';
import type { UploadFile } from 'ant-design-vue';
import { baseRequestClient, requestClient } from '#/api/request';
import type {
  UploadProgressEvent,
  UploadRequestError,
  UploadRequestOption,
} from 'ant-design-vue/es/vc-upload/interface';

interface Props {
  className: string;
  maxSize: number;
  maxCount: number;
  accept: string;
  onChange: (file: UploadFile) => void;
  beforeUpload?: (file: File) => Promise<boolean>;
}

const { className, maxCount, accept, maxSize, beforeUpload } =
  defineProps<Props>();

// const handleUploadFile = async (file: File)=>{
//   await requestClient.upload('',{file})
// }

const customRequest = async (options: UploadRequestOption) => {
  const { onSuccess, onError, file } = options;
  await requestClient
    .upload('imageUpload', { file: file })
    .then(() => {})
    .catch((error) => {
      !!onError && onError(error);
    });
  // try {
  //   const res = await requestClient.upload('imageUpload', formData);
  //   // if (res.code == 200) {
  //   //   file['thumbUrl'] = res.path;
  //   //   const _response = {
  //   //     name: file.name,
  //   //     status: 'done',
  //   //     path: res.path,
  //   //   };
  //   //   !!onSuccess && onSuccess(_response, file);
  //   // }
  // } catch (error) {
  //   !!onError && onError('上传失败！');
  // }
};
</script>

<template>
  <div class="w-full">
  <div :class="className">
    <UploadDragger
      :max-count="maxCount"
      :accept="accept"
      :maxSize="maxSize"
      :change="onChange"
      :before-upload="beforeUpload"
      :customRequest="customRequest"
    >
      <span class="text-sm">上传文件</span>
    </UploadDragger>
  </div>
</div>
</template>

<style scoped lang="less">
.upload {
  width: 100%;
  height: 100%;
}
</style>
